<template>
    <div id="uploadImg">
        上传图片并预览
        <input id="uploadInput" ref="uploadInput" type="file" accept="image/*" multiple @change="changeFileItem($event)">
        <section id="container">
            <div class="imgItems" v-for="(item,index) in imgItem" :key="index">
                <img class="imgItem" :src="dataToUrl(item)">
            </div>
            <div id="addImg" @click="addImgBtn()">
                点击添加图片
            </div>
        </section>
            <button @click="uploadBtn()">开始上传</button>
    </div>
</template>
<script>
    import {upload} from "../assets/js/upload";
    export default {
        name: "uploadImg",
        components: {},
        data() {
            return {
                imgItem: {},
            };
        },
        methods: {
            addImgBtn() {

                this.$refs.uploadInput.click();
            },
            changeFileItem(e) {
                this.imgItem = e.target.files;
                console.log(this.imgItem);

            },
            dataToUrl(data) {
                let windowURL = window.URL || window.webkitURL;
                let dataURL = windowURL.createObjectURL(data);
                return dataURL
            },
            uploadBtn() {
                console.log('455454486876687');

                let data = {
                    file: this.imgItem
                }
                upload(data)
            }
        }
    };
</script>
<style scoped>
    #uploadImg>#uploadInput {
        display: none;
    }

    #container {
        padding: 16px;
        display: flex;
    }

    .imgItems {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 2px dotted #666666;
    }

    .imgItem {
        width: 100px;
        height: 100px;
    }

    #addImg {
        display: inline-block;
        border: 2px dotted #666666;
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 16px;
        text-align: center;
        border-radius: 16px;
        cursor: pointer;
        user-select: none;
    }

    .imgItems+#addImg {
        margin-left: 16px;
    }
</style>